
<template>
  <div class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen
    text-white p-5 flex overflow-hidden
  "  v-if="data">
    <div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <HorizontalBar class=" h-1/3 box-border pb-4" :data="data.regionData"/>
      <RadarBar  class=" h-1/3 box-border pb-4 " :data="data.riskData"/>
      <Relation  class=" h-1/3 " :data="data.relationData"/>

    </div>
    <div class="w-1/2 mr-5 flex flex-col">
      <TotalData class=" bg-opacity-50 bg-slate-800 p-3" :data="data.totalData"/>
      <MapChart class=" bg-opacity-50 bg-slate-800 p-3 mt-4 flex-1" :data="data.mapData"/>
    </div>
    <div class="flex-1  bg-opacity-50 bg-slate-800 p-3 flex flex-col">
      <VerticalBar  class=" h-1/3 box-border pb-4 " :data="data.serverData"/>
      <RingBar  class=" h-1/3 box-border  pb-4" :data="data.abnormalData"/>
      <WordCloud  class=" h-1/3 " :data="data.wordCloudData"/> 

    </div>
  </div>
</template>

<script setup lang="ts">
import HorizontalBar from './components/HorizontalBar.vue';
import VerticalBar from './components/VerticalBar.vue';
import WordCloud from './components/WordCloud.vue';
import TotalData from './components/TotalData.vue';
import RingBar from './components/RingBar.vue';
import Relation from './components/Relation.vue';
import RadarBar from './components/RadarBar.vue';
import MapChart from './components/MapChart.vue';

import { getVisualization } from './api/visualization';
import { onMounted, ref } from 'vue';
import type { Data, Risks,Regions,Relations,WordCloudDatas,Abnormals,Map,Servers ,TotalDatas} from './api/types.ts';

const defaultData: Data= {
  regionData: { regions: []} as Regions,
  riskData: { risks: [] } as Risks,
  relationData: { relations: []} as Relations,
  totalData: { total: 0} as TotalDatas,
  mapData: {} as Map,
  serverData: { servers: []} as Servers,
  abnormalData: { abnormals:[]} as Abnormals,
  wordCloudData: { datas: []} as WordCloudDatas,
  radarData: [],
}

const data = ref<Data>(defaultData);
const loadData = async () => {
  data.value   = await getVisualization();
}

onMounted(() => {
  loadData();
  setInterval(() => {
  loadData()
}, 5000)
})




</script>

<style scoped lang="scss">



</style>
